<template>
	<view :class="[primarySize()]">
		<!-- <view class="page-foot bg-white">
			<view class="foot_nav">
				<view class="btn1">立即沟通</view>
			</view>
		</view> -->
		<view class="container">
			<view class="banner">
				<view class="star" @click="bindToggleFav" v-if="group_id != 2">
					<image :src="iconPath(isFav?'fav_sc.png':'fav.png')" mode="aspectFit"></image>
					<view>{{star?'已':''}}收藏</view>
				</view>
				<view @click="shareTip" class="share" v-if="group_id != 2">
					<image src="@/static/public/share.png" mode="aspectFit"></image>
					<view>分享</view>
				</view>
			</view>
			<view class="page-head">
				<hx-navbar ref="hxnb" :config="config"></hx-navbar>
			</view>
			<image :src="cdnurl(images[0])" mode="aspectFill" class="top_bg"></image>
			<view class="box">
				<view class="pr z2 plr30 pb30">
					<image :src="cdnurl(company.enterpriseinfo.logo)" mode="aspectFill" class="logo"></image>
					<view class="tc mt30 fwb fs34 col3 lh48 pt98">
						{{company.enterpriseinfo.full_name||company.enterpriseinfo.company_name}}
					</view>
					<view class="tc mt10 fs24 col9 lh34">
						{{company.enterpriseinfo.city.id?company.enterpriseinfo.city.shortname:''}} |
						{{company.enterpriseinfo.company_properties.name || ''}} |
						{{company.enterpriseinfo.company_scale.name || ''}} |
						{{company.enterpriseinfo.industry_category.name || ''}}
					</view>

					<view class="detail_item mt40">
						<view class="describe_tit">公司介绍</view>
						<view class="describe_text">
							<text>
								{{company.enterpriseinfo.intro || ''}}
							</text>
						</view>
					</view>
					<view class="detail_item mt40">
						<view class="flex-box">
							<view class="describe_tit">公司地址</view>
							<view class="flex-grow-1 flex-box flex-end" @click="bindShowLocation">
								<image :src="iconPath('icon_guide.png')" mode="widthFix"
									class="ico28"></image>
								<view class="fs24 col3 pl10">去这里</view>
							</view>
						</view>
						<map id="map" :enable-scroll="false" :longitude="company.enterpriseinfo.lng"
							:latitude="company.enterpriseinfo.lat" scale="14" :markers="markers"
							@markertap="bindShowLocation" show-location style="width: 100%; height: 263rpx;"></map>
					</view>
					<view class="detail_item mt40" v-if="images.length>0">
						<view class="flex-box" @click="bindShowImages">
							<view class="describe_tit flex-grow-1">企业图片</view>
							<image class="arrow-r" src="@/static/public/arrow-r.png" mode="widthFix"></image>
						</view>
						<view class="clearfix">
							<view class="info_img" v-for="(item,index) in images">
								<image @click="bindImagesPrev(index)" :src="cdnurl(item)" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="detail_item mt40">
						<navigator :url="'/pages/user/company_comment_list?id='+companyId" class="flex-box"
							hover-class="none">
							<view class="describe_tit flex-grow-1">企业评价<text
									class="fs28 col6 pl20 fn">（{{commentCount}}条）</text></view>
							<image class="arrow-r" src="@/static/public/arrow-r.png" mode="widthFix">
							</image>
						</navigator>
						<view>
							<view class="appraise_item" v-for="(item,index) in comments">
								<view class="flex-box">
									<view class="header_img">
										<image :src="cdnurl(item.user.avatar)" mode="aspectFill"></image>
									</view>
									<view class="flex-grow-1">
										<view class="flex-box">
											<view class="m-ellipsis pr30 flex-grow-1">{{item.user.nickname}}</view>
											<view class="star_img">
												<image src="@/static/public/star-on.png" mode="aspectFit"
													v-for="(item,index) in parseInt(item.avg_score)"></image>
											</view>
										</view>
									</view>
								</view>
								<view class="clearfix ptb20" v-if="item.tags_text.length>0">
									<view class="welfare_item" v-for="tag in item.tags_text">{{tag}}</view>
								</view>
								<view class="fs26 col3">{{item.content}}</view>
							</view>
						</view>
					</view>
					<view class="describe_tit mt40">在招职位</view>
					<view class="posts_list">

						<job-list :jobs="jobs"></job-list>

					</view>

				</view>

				<u-popup :show="showShareTip" bgColor="transparent" mode="center" @close="shareTip">
					<view class="tip_tc">
						<view class="tip_p">
							<view>请选择分享方式</view>
						</view>
						<view class="flex-box tip_btn">
							<view class="flex-grow-1" @click="share">分享海报</view>
							<button open-type="share" @click="shareTip" class="flex-grow-1 col4">分享小程序</button>
						</view>
					</view>
				</u-popup>
				<u-popup :show="showCommentTip && group_id != 2" bgColor="transparent" mode="center" @close="commentTip" catchtouchmove="preventdefault">
					  <view class="eval_tc">
					    <image :src="iconPath('write_logo.png')" mode="aspectFit"></image>
					    <view class="eval_tit">您曾在{{company.enterpriseinfo.full_name||company.enterpriseinfo.company_name}}就职诚邀您对此公司评价</view>
					    <view class="m-list-flex eval_btn">
					      <view class="m-cell-bd" @click="commentTip">取消</view>
					      <view @click="createCompanyComment" class="m-cell-bd">去评价</view>
					    </view>
					  </view>
				</u-popup>
			</view>
		</view>

	</view>
</template>

<script>
	import image from '../../uni_modules/uview-ui/libs/config/props/image';
	import jobList from '../../components/job-list/job-list.vue';
	const app = getApp();
	export default {
		components: {
			jobList
		},
		data() {
			return {

				config: {
					color: '#fff',
					back: true,
					title: '公司详情',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [0, ['#000', '#000']],
					slideBackgroundColor: [1,'var(--primary)'],
					statusBarFontColor: ['#ffffff', '#ffffff']
				},
				companyId: 0,
				company: {
					enterpriseinfo: {
						company_name: '',
						intro: '',
						company_properties: {
							name: ''
						},
						company_scale: {
							name: ''
						},
						industry_category: {
							name: ''
						}
					}
				},
				commentCount: 0,
				group_id: 1,
				markers: [],
				images: [],
				isFav: false,
				nav: 0,
				jobs: [],
				comments: [],
				showShareTip: false,
				showCommentTip:false
			}
		},
		// onPageScroll(e) {
		// 	// 重点，用到滑动切换必须加上
		// 	this.$refs.hxnb.pageScroll(e);
		// },

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {


			let group_id = this.$core.getUserinfo() ? this.$core.getUserinfo().group_id : 1;
			if (options.scene) {
				let scene = decodeURIComponent(options.scene);
				let query = scene.split('&');
				options.id = query[0].split('=')[1];
			}
			this.companyId = options.id;
			this.group_id = group_id;
			this.getCompanyDetail();
			this.$core.get({
				url: 'xilujob.company/jobs',
				data: {
					company_id: this.companyId
				},
				success: (ret) => {
					this.jobs = ret.data.jobs
				}
			});
			this.$core.get({
				url: 'xilujob.company_comment/lists',
				data: {
					company_id: this.companyId,
					pagesize: 5
				},
				success: ret => {
					this.comments = ret.data.company_comments;
					this.commentCount = ret.data.total;
				}
			});
			uni.$on(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			uni.$off(app.globalData.Events.UserLogin, this.eventOnUserLogin);
		},
		methods: {
			shareTip() {
				this.showShareTip = !this.showShareTip
			},
			commentTip(){
				this.showCommentTip=false
			},
			onShareAppMessage() {
				let title = this.company.enterpriseinfo.full_name||this.company.enterpriseinfo.company_name;
				return {
					title: title
				};
			},
			onShareTimeline() {
				let title = this.company.enterpriseinfo.full_name||this.company.enterpriseinfo.company_name;
				return {
					title: title
				};
			},
			  createCompanyComment() {
			    uni.navigateTo({url: '/pages/user/post_company_comment?id='+this.company.id, success:(res)=>{
			      res.eventChannel.emit('dataTransfer',{company:this.company});
			    }});
			    this.commentTip();
			  },
			getCompanyDetail() {
				this.$core.get({
					url: '/xilujob.company/detail',
					data: {
						company_id: this.companyId
					},
					success: ret => {
						let company = ret.data.company;
						let images = company.enterpriseinfo.environment_images;
						images = images ? images.split(',') : [];
						let markers = [];
						if (company.enterpriseinfo.lat != 0) {
							markers.push({
								id: 0,
								latitude: company.enterpriseinfo.lat,
								longitude: company.enterpriseinfo.lng,
								width: 35,
								height: 35,
								callout: {
									content: company.enterpriseinfo.address, //文本
									color: '#000000', //文本颜色
									borderRadius: 3, //边框圆角
									borderWidth: 1, //边框宽度
									borderColor: '#ffffff', //边框颜色
									bgColor: '#ffffff', //背景色
									padding: 5, //文本边缘留白
									display: "ALWAYS",
									textAlign: 'center' //文本对齐方式。有效值: left, right, center
								}
							});
						}
						this.company = company;
						this.isFav = ret.data.is_fav;
						// this.commentCount = ret.data.comment_count;
						this.images = images;
						this.markers = markers;
						this.showCommentTip= ret.data.can_comment
					},
					fail: ret => {
						uni.showModal({
							title: '提示',
							content: ret.msg,
							showCancel: false,
							success(res) {
								uni.navigateBack();
							}
						});
						return false;
					}
				});
			},
			//图片
			bindShowImages() {
				uni.navigateTo({
					url: '/pages/user/business_image',
					success: (res) => {
						res.eventChannel.emit('dataTransfer', {
							images: this.images
						});
					}
				});
			},
			//预览
			bindImagesPrev(index) {
				let images = this.images;
				for (let i = 0; i < images.length; i++) {
					images[i] = this.cdnurl(images[i])
				}
				uni.previewImage({
					urls: images,
					current: index
				})
			},
			bindToggleFav: function() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				let page = this;
				page.isFav = !this.isFav
				this.$core.post({
					url: '/xilujob.company/toggle_fav',
					loading: false,
					data: {
						company_id: this.companyId
					},
					success: (ret) => {
						page.isFav = ret.data.is_fav
						if (page.isFav) {

							uni.$emit(app.globalData.Events.CompanyFavAdd, {
								company: page.company
							});
						} else {

							uni.$emit(app.globalData.Events.CompanyFavRemove, {
								company: page.company
							});
						}
					},
					fail: ret => {
						uni.showToast({
							title: '收藏失败',
							icon: 'none'
						});
						page.isFav = !page.isFav;
						return false;
					}
				});
			},
			eventOnUserLogin(userinfo) {
				this.getCompanyDetail();
			},
			share() {
				this.$core.get({
					url: '/xilujob.company/poster_info/id/' + this.company.id,
					success: ret => {
						this.$core.setCache('temp', ret.data, 10);
						uni.navigateTo({
							url: '/pages/public/share_post2'
						})
					},
					fail:err=>{
						console.log(err);
						uni.showToast({
							icon:'none',
							title:err
						})
					}
				});
			},
			bindShowLocation() {
				uni.openLocation({
					latitude:Number(this.company.enterpriseinfo.lat),
					longitude:Number(this.company.enterpriseinfo.lng),
					name: this.company.enterpriseinfo.full_name || this.company.enterpriseinfo.company_name,
					address: this.company.enterpriseinfo.address,
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.top_bg {
		width: 750rpx;
		height: 450rpx;
		position: absolute;
		top: 0;
		z-index: 1;
		left: 0;

	}

	.box {

		position: relative;
		z-index: 2;
		margin-top: 350rpx;

		&:before {
			content: '';
			width: 750rpx;
			height: 548rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FE 100%);
			border-radius: 58rpx 58rpx 0rpx 0rpx;
			position: absolute;
			z-index: 1;
		}

		.logo {
			width: 136rpx;
			height: 136rpx;
			background: #FFFFFF;
			border-radius: 50%;
			top: -68rpx;
			left: 50%;
			transform: translateX(-50%);
			display: block;
			position: absolute;
		}
	}

	.pt98 {
		padding-top: 98rpx;
	}

	.detail_item {
		padding: 30rpx;
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
	}

	.describe_tit {
		position: relative;
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.describe_text {
		line-height: 54rpx;
		font-size: 26rpx;
		color: #333333;
	}

	.describe_tit::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 136rpx;
		height: 17rpx;
		background: var(--primary);
		opacity: 0.3
	}

	.describe_tit.tit1 {
		margin: 0 0 30rpx;
		font-size: 36rpx;
	}

	.describe_tit.tit1::after {
		width: 149rpx;
		height: 14rpx;
		border-radius: 7rpx;
		background: var(--primary);
		opacity: 0.3
	}

	.map {
		margin-top: 30rpx;
		width: 100%;
		height: 284rpx;
		display: block;
		border-radius: 18rpx;
	}

	.info_img {
		width: calc((100% - 30rpx)/3);
		margin-right: 15rpx;
		border-radius: 4rpx;
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.06);
		height: 224rpx;
		margin-top: 30rpx;
		float: left
	}

	.info_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.info_img:nth-child(3n) {
		margin-right: 0
	}

	.arrow-r {
		width: 10rpx;
		height: 13rpx;
	}

	.posts_list {
		padding-bottom: 10rpx;
	}

	.posts_item {
		width: 690rpx;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		margin-top: 20rpx;

		.tips_item {
			height: 32rpx;
			background: #ECEFF5;
			border-radius: 4rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #A5A5A5;
			line-height: 32rpx;
			display: inline-block;
			vertical-align: top;
			margin-right: 10rpx;
			margin-top: 10rpx;
			padding: 0 8rpx;
		}

		.urgent {
			width: 74rpx;
			height: 37rpx;
			line-height: 33rpx;
			text-align: center;
			font-size: 24rpx;
			color: #FF7B20;
			border-radius: 6rpx;
			border: 2rpx solid #FF7B20;
		}

		.company_cover {
			width: 52rpx;
			height: 52rpx;
			border-radius: 50%;
		}
	}

	.foot_nav {
		padding: 10rpx 60rpx;
	}

	.fs28 {
		font-size: 28rpx
	}

	.fs26 {
		font-size: 26rpx
	}

	.header_img {
		width: 72rpx;
		height: 72rpx;
		margin-right: 20rpx;
	}

	.header_img image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 50%;
	}

	.star_img image {
		width: 29rpx;
		height: 27rpx;
		display: inline-block;
		vertical-align: middle;
		margin-left: 9rpx;
	}

	.welfare_item {
		font-size: 20rpx;
		color: #999;
		float: left;
		border-radius: 8rpx;
		line-height: 39rpx;
		background-color: #F7F7F7;
		margin-right: 20rpx;
		padding: 0 15rpx;
		box-sizing: border-box
	}

	.ptb20 {
		padding: 20rpx 0;
	}

	.appraise_item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F3F3F3
	}

	.appraise_item:nth-last-child(1) {
		padding-bottom: 0;
		border-bottom: 0
	}

	.star {
		font-size: 18rpx;
		color: #333;
		text-align: center;
		position: absolute;
		top: 180rpx;
		right: 39rpx;
		z-index: 3;
	}

	.star image {
		width: 33rpx;
		height: 31rpx;
		display: block;
		margin: 0 auto 10rpx;
	}

	.share {
		font-size: 18rpx;
		color: #333;
		text-align: center;
		position: absolute;
		top: 180rpx;
		right: 100rpx;
		z-index: 3;
	}

	.share image {
		width: 33rpx;
		height: 31rpx;
		display: block;
		margin: 0 auto 10rpx;
	}

	.tip_tc {

		background-color: #fff;
		font-size: 30rpx;
		color: #000;
		text-align: center;
		width: 520rpx;
		border-radius: 20rpx;
		overflow: hidden
	}

	.tip_tc image {
		width: 81rpx;
		height: 81rpx;
		display: block;
		margin: 0 auto
	}

	.zz {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		text-align: center
	}

	.tip_p {
		padding: 52rpx 60rpx;
	}

	.tip_tc button {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 33rpx;
	}

	.tip_btn {
		line-height: 90rpx;
		border-top: 1rpx solid #E1E1E1
	}

	.tip_btn view:nth-child(2) {
		border-left: 1rpx solid #E1E1E1
	}
	.eval_tc{width: 520rpx;border-radius: 20rpx;background-color: #fff;}
	.eval_tit{font-size: 32rpx;color: #000;padding-left: 85rpx;padding-right: 85rpx;line-height: 1.438;text-align: center;padding-bottom: 52rpx;border-bottom: 1rpx solid #E1E1E1}
	.eval_tc image{width: 118rpx;height: 118rpx;margin: -59rpx auto 36rpx;display: block}
	.eval_btn{line-height: 90rpx;text-align: center;font-size: 28rpx;color: #666666}
	.eval_btn view:nth-child(2){border-left: 1rpx solid #e1e1e1;color: var(--primary)}
	.tab_w{margin-left: -30rpx;margin-right:-30rpx;width: calc(100% + 60rpx)}
</style>